<template>
  <view>
    <uni-card v-if="product">
      <view class="flex">
        <view class="pr-1">
          <u-image @click="handlePreview(prefix+product.picture)" v-if="product.picture" :show-loading="true" :src="prefix+product.picture" width="60px"
                   height="60px"></u-image>
          <u-icon v-else size="60" class="w-14 h-14" name="photo" color="#2979ff"></u-icon>
        </view>
        <view>
          <view class="grid grid-cols-8">
            <view class="col-span-7 flex flex-col">
              <view class="text-black text-xl truncate">
                {{ product.name }}
              </view>
              <view class="text-sm text-gray-500">
                {{ product.barcode }}
              </view>
              <view class="flex">
                <view class="w-14 text-sm text-gray-500">分类：</view>
                <view class="text-sm text-gray-700">{{ product.category || '-' }}</view>
              </view>
              <view class="flex">
                <view class="w-14 text-sm text-gray-500">供应商：</view>
                <view class="text-sm text-gray-700">{{ product.supplierName || '-' }}</view>
              </view>
            </view>
            <view class="col-span-1 flex flex-col items-end justify-between">
              <view class="text-red-600 text-lg text-end w-10">
                ￥{{ product.price }}
              </view>
              <view v-if="selected===product">
                <u-button @click="handleManage" size="mini">管理</u-button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </uni-card>
  </view>
</template>

<script setup lang="ts">

import {type PropType} from "vue";
import {imagePathPrefix} from '/settings'

const prefix = imagePathPrefix
const props = defineProps({
  product: {
    type: Object as PropType<IProduct>,
    default: () => {
    }
  },
  selected: {
    type: Object as PropType<IProduct>,
    default: () => {
    }
  },
})
const emits = defineEmits(['manage'])

const handleManage = () => {
  emits('manage', props.product)
}
const handlePreview=(url:string)=>{
  uni.previewImage({
    urls: [url],
    longPressActions: {
      itemList: ['发送给朋友', '保存图片', '收藏'],
      success: function(data) {
        console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
      },
      fail: function(err) {
        console.log(err.errMsg);
      }
    }
  });
}



</script>

<style scoped>

</style>